<template>
<div class="colorpicker-bt">
    <el-color-picker 
        v-model="color" 
        @active-change="$emit('input',$event)"
        size="medium"
        :predefine="predefineColorList">
    </el-color-picker>
</div>
</template>

<script>
//颜色选择按钮组件
export default {
    props:{
        value:{  //颜色
            type:String,
            default:'',
        },
    },
    data(){
        return{
            predefineColorList: [  //预定义颜色
                '#db3b61',
                '#ef3f61',
                '#3a3a59',
                '#555574',
                '#364f6b',
                '#23b1a5',
                '#ffde7d',
                '#ff5722',
                '#88304e',
                '#3ec1d3',
            ],
        };
    },
    computed:{
        color:{
            get(){
                return this.value;
            },
            set(newValue){
                this.$emit('input',newValue);
            },
        },
    },
}
</script>
<style lang="scss" scoped>
.colorpicker-bt{
    width: fit-content;
    height: 36px;
    width: 36px;
    font-size: 1.3rem;
    font-weight: bold;
    line-height: 1.3rem;
    border-radius: 5px;
    color: #c2c2c2;
    transition: all 0.2s;
    cursor: pointer;
    background-color: rgba(0,0,0,.1);
    &:hover{
        background-color: rgba(0,0,0,.2);
    }
    /deep/span{
        font-size: 1.3rem;
        font-weight: bold;
    }
}
</style>

